<template>
    <div class="round_view relative transition cur" :style="{ '--scale': 0.65 }">
        <div 
            class=" circle_view transition w-full h_full absolute" 
            v-for="circle, index in list.slice(0, 8)" 
            :key="index" 
            @click="$emit('circle', index + 1)"
        >
            <div class="w-full h_full el-image">
                <img :src="require(`@/assets/round/circle${index + 1}.png`)" class="el-image__inner" />
            </div>
            <span class="absolute flex-center circle_view-text" :class="circle > 99 ? 'font24' : 'font36'">{{ circle || 0 }}</span>
        </div>


        <div class="absolute circle_view-center transition flex_center_center" @click="$emit('learn')">
            <img src="@/assets/img/triangle.png" />
        </div>
        <div class="absolute" style="left: -217px;top: -120px;">
            <img style="width: 860px;" src="@/assets/dcnew/mtl.png" />
        </div>
    </div>
</template>

<script>

    export default {
        props: {
            list: {
                type: Array,
                default: () => ([])
            },
        },

        data () {
            return {
                clientWidth: 0,
                scale: 0.7,
                listenerResize: this.debounce(this.resize)
            }
        },

        mounted() {
            this.clientWidth = document.documentElement.clientWidth
            addEventListener('resize', this.listenerResize)
        },

        beforeDestroy() {
            this.timeStamp = ''
            removeEventListener('resize', this.listenerResize)
        },

        methods: {
            resize() {
                const width = document.documentElement.clientWidth
                if (width> this.clientWidth && this.scale < 1) this.scale += 0.05
                else if (this.scale >= 0.7) this.scale -= 0.1
                this.clientWidth = width
            },

            debounce(fn, delay = 300) {
                let timer = null
                return function(...args) {
                    timer && clearTimeout(timer)
                    timer = setTimeout(() => fn(args), delay)
                }
            }
        }
    }

</script>event

<style lang="scss" scoped>
@import "~@/styles/mixins.scss";

.relative{position: relative}
.absolute{position: absolute}
.transition{transition: all .35s}
.flex-center{display: flex;justify-content: center;align-items: center}
.round_view{width: 516px;height: 474px;transform: scale(var(--scale))}
.circle_view span {width: 54px;height: 54px;color: #fff;}
.circle_view:first-child{
    width: 176px;
    height: 156px;
    left: 35px;
    bottom: 109px;
    z-index: 3;
}
.circle_view:first-child .circle_view-text{    top: 50px;
    left: 52px;}
.circle_view:nth-child(2){
    width: 176px;
    height: 156px;
    left: -71px;
    bottom: 228px;
    z-index: 2;
}
.circle_view:nth-child(2) .circle_view-text{    top: 44px;
    left: 51px;}
.circle_view:nth-child(3){
    width: 176px;
    height: 156px;
    left: -73px;
    top: -75px;
    z-index: 1;
}
.circle_view:nth-child(3) .circle_view-text{    top: 45px;
    left: 52px;
}
.circle_view:nth-child(4){
    width: 176px;
    height: 156px;
    left: 51px;
    top: -208px;
    z-index: 3;}
.circle_view:nth-child(4) .circle_view-text{top: 51px;
    left: 53px;}
.circle_view:nth-child(5){
    width: 176px;
    height: 156px;
    right: 121px;
    top: -218px;
    z-index: 2;}
.circle_view:nth-child(5) .circle_view-text{    top: 51px;
    left: 50px;}
.circle_view:nth-child(6){
    width: 176px;
    height: 156px;
    right: 7px;
    top: -96px;
    z-index: 1;
}
.circle_view:nth-child(6) .circle_view-text{    top: 53px;
    right: 68px;}
.circle_view:nth-child(7){
    width: 176px;
    height: 156px;
    right: -19px;
    top: 82px;
    z-index: 2;
}
.circle_view:nth-child(7) .circle_view-text{    bottom: 49px;
    right: 71px;}
.circle_view:nth-child(8){
    width: 170px;
    height: 158px;
    bottom: 105px;
    right: 109px;
    z-index: 1;
}
.circle_view:nth-child(8) .circle_view-text{    bottom: 45px;
    right: 63px;}
.circle_view:hover{transform: scale(1.08)}

.circle_view-center{
    width: 213px;
    height: 213px;
    background-color: #F6C72C;
    border-radius: 100%;
    left: 41%;
    z-index: 9;
    top: 14%;
    transform: translate(-50%, -50%);
    margin-top: 13px;
    color: #fff;
    font-size: 36px;
}
.circle_view-center:hover{transform: translate(-50%, -50%) scale(1.08)}

</style>